<div class="root">
  部门设置
  <button mat-icon-button (click)="add()">
    <mat-icon>add</mat-icon>
  </button>
</div>
<m-tree [data]="departments$ | async">
  <ng-template let-department>
    <div class="department-node list" *ngIf="!department.editing; else edit">
      <span class="name">
        {{ department.name }}
      </span>
      <span class="desc">
        {{ department.des }}
      </span>

      <button mat-icon-button (click)="addChild(department)">
        <mat-icon>add</mat-icon>
      </button>
      <button mat-icon-button (click)="department.editing = true">
        <mat-icon>edit</mat-icon>
      </button>
      <button mat-icon-button (click)="delete(department)">
        <mat-icon>delete</mat-icon>
      </button>
    </div>
    <ng-template #edit>
      <div class="department-node edit form-inline">
        <input
          type="text"
          class="form-control form-control-sm name"
          [(ngModel)]="department.name"
          placeholder="部门名"
        />
        <input
          type="text"
          class="form-control form-control-sm desc"
          [(ngModel)]="department.des"
          placeholder="部门简介"
        />
        <button mat-icon-button (click)="save(department)">
          <mat-icon>save</mat-icon>
        </button>
        <button mat-icon-button (click)="cancel(department)">
          <mat-icon>cancel</mat-icon>
        </button>
      </div>
    </ng-template>
  </ng-template>
</m-tree>
